<template>
  <div class="itemList">
    <div v-if="index == 0" class="hot">
      <div v-for="(item, i) in cityList" :key="i">{{ item }}</div>
    </div>
    <div v-else class="normal">
      <div v-for="(item1, i1) in cityList" :key="i1" class="nItem">
        <div class="letter">{{ item1.letter }}</div>
        <div class="cList">
          <div class="city" v-for="(item2, i2) in item1.cityList" :key="i2">
            <p>{{ item2 }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ft_cityItem",
  data() {
    return {};
  },
  props: {
    cityList: {},
    index: {},
  },
  components: {},
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.itemList {
  .hot {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    div {
      width: 70px;
      line-height: 32px;
      cursor: pointer;
      &:hover {
        color: #ff9d00;
        text-decoration: underline;
      }
    }
  }
  .normal {
    padding-left: 20px;
    .nItem {
      display: flex;
      align-items: baseline;
      line-height: 30px;
      .letter {
        width: 25px;
        flex-shrink: 0;
        color: #ff9d00;
      }
      .cList {
        display: flex;
        flex-wrap: wrap;
        .city {
          width: 70px;
          height: 30px;
          line-height: 30px;
          overflow: hidden;
          p {
            overflow: hidden;
            cursor: pointer;
            &:hover {
              color: #ff9d00;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}
</style>